import React, {Component} from 'react';
import propTypes from 'prop-types'
import {Col, Row} from 'antd'
import {connect} from 'dva';
import {Link} from 'dva/router';
import {classHelper} from '../utils/class'
import MainStyle from '../assets/css/main.css'
import TopStyle from '../assets/css/topLayout.css'
import {MyIcon} from './index'

class Item extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      animated: 0,
    }
  }

  onMouseOver() {
    if (!this.props.showAnimated) return;
    this.setState({
      animated: 1
    })
  }

  onMouseLeave() {
    if (!this.props.showAnimated) return;
    this.setState({
      animated: -1
    })
  }

  render() {
    const props = this.props;
    const {animated} = this.state;
    return (
      <a className={classHelper([TopStyle.item, props.className])}
         onMouseOver={this.onMouseOver.bind(this)}
         onMouseLeave={this.onMouseLeave.bind(this)}
         href={props.href}
      >
        <div className={TopStyle.child}>
          {props.children}
        </div>
        <div
          className={classHelper([TopStyle.line, animated === -1 ? TopStyle.line_out : animated === 1 ? TopStyle.line_in : ''])}
          style={{backgroundColor: props.lineColor}}
        />
      </a>
    )
  }
}

Item.propTypes = {
  showAnimated: propTypes.bool,
  lineColor: propTypes.string,
  href: propTypes.string,
  className: propTypes.string
}
Item.defaultProps = {
  showAnimated: false,
  lineColor: 'black',
  href: '#',
  className: ''
}

class TopLayout extends Component {
  constructor() {
    super();
    this.state = {
      navRightAction: '目录',
      menuIconAnimated:''
    }
  }

  navRightMenuClick() {
    this.setState({menuIconAnimated:TopStyle.trasnH})
    this.setState({menuIconAnimated:''})
    if (this.state.navRightAction === '目录') {
      this.setState({navRightAction: '关闭'})
    } else {
      this.setState({navRightAction: '目录'})
    }
    // setTimeout(()=>{
    //   this.setState({menuIconAnimated:''})
    //   if (this.state.navRightAction === '目录') {
    //     this.setState({navRightAction: '关闭'})
    //   } else {
    //     this.setState({navRightAction: '目录'})
    //   }
    // },500)
  }

  renderChildren() {
    const {props, className} = this;
    if (typeof props.children === 'array') {
      return (
        <div className={classHelper(props.containerClassName)} style={props.containerStyle}>
          {props.children.map(e => e)}
        </div>
      )
    } else if (typeof props.children === 'object') {
      return (
        <div className={classHelper(props.containerClassName)} style={props.containerStyle}>
          {props.children}
        </div>
      )
    }
    return null;
  }

  render() {
    const {props, className} = this;
    const {theme} = props;
    const lineColor = theme === 'white' ? 'black' : 'white';
    return (
      <div className={MainStyle.relative}>
        <div
          className={classHelper([TopStyle.container, MainStyle.spaceBetween, TopStyle.centerH, theme === 'white' ? TopStyle.white : TopStyle.transparent,])}>
          <div className={classHelper([TopStyle.centerH, MainStyle.full])} style={{zIndex:1}}>
            <Item lineColor={lineColor}>MARKSPACE</Item>
            <div className={classHelper([TopStyle.menus])}>
              <Item showAnimated lineColor={lineColor}>办公地点
                <MyIcon name='icon-f11' size={20}/>
              </Item>
              <Item showAnimated lineColor={lineColor}>会员计划</Item>
              <Item showAnimated lineColor={lineColor}>MARKSPACE特色</Item>
              <Item showAnimated lineColor={lineColor}>MARKSPACE愿景</Item>
              <Item showAnimated lineColor={lineColor}>企业入驻</Item>
            </div>
          </div>
          <div className={classHelper([MainStyle.flexRow])}>
            <Item showAnimated
                  lineColor={lineColor}
                  className={TopStyle.hideMd}
                  href='tel:400-xxx-xxxx'
            >
              <MyIcon name="icon-zuoji" size={25}/>
              400-xxx-xxxx
            </Item>
            <a className={TopStyle.login} href='#'>
              <span>登录</span>
            </a>
            <div href="#" className={classHelper([TopStyle.navMenu,this.state.menuIconAnimated])}>
              <span>{this.state.navRightAction}</span>
              <MyIcon name={this.state.navRightAction === '目录' ? "icon-caidan" : "icon-guanbi"} size={25}
                      onClick={this.navRightMenuClick.bind(this)}/>
            </div>
          </div>
        </div>

        <div className={props.theme==='transparent'?TopStyle.childrenAbsolute:TopStyle.childrenRelative}>
          {this.renderChildren()}
        </div>
        <div
          className={classHelper([TopStyle.navMenus, this.state.navRightAction !== '目录' ? MainStyle.hide : MainStyle.show])}>
          <div className={classHelper([TopStyle.container, MainStyle.flexEnd, TopStyle.centerH])} style={{borderBottom:'1px solid #ccc'}}>
            <div href="#" className={classHelper([TopStyle.navRightMenu,this.state.menuIconAnimated])}>
              <span>{this.state.navRightAction}</span>
              <MyIcon name={this.state.navRightAction === '目录' ? "icon-caidan" : "icon-guanbi"} size={25}
                      onClick={this.navRightMenuClick.bind(this)}/>
            </div>
          </div>
          <div style={{padding:'0 5%'}}>
            <Item  lineColor={lineColor} href='#'>首页</Item>
            <Item  lineColor={lineColor}>办公地点
              <MyIcon name='icon-icon' size={20}/>
            </Item>
            <Item  lineColor={lineColor}>会员计划</Item>
            <Item  lineColor={lineColor}>MARKSPACE特色</Item>
            <Item  lineColor={lineColor}>MARKSPACE愿景</Item>
            <Item  lineColor={lineColor}>企业入驻</Item>
          </div>
        </div>
      </div>
    )
  }
}

TopLayout.defaultProps = {
  theme: 'white'
}
TopLayout.propTypes = {
  containerClassName: propTypes.oneOfType([
    propTypes.string,
    propTypes.array,
  ]),
  containerStyle: propTypes.object,
  theme: propTypes.oneOf([
    'white',
    'transparent'
  ])
}


export default connect()(TopLayout)
